// pages/software_show/temp/temp.js
import { getMvUrl, getMvRelated, getVideoUrl } from '../../service/api_video'
import MniaTouch from 'mina-touch'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    urls: [],      // url集合
    pageY: '',       // 触摸起始高度坐标
    animation: '',   // 视频划动动画
    up_stroke: false,// ture:上划；false：下划
    difference: '',  // 拖动的距离
    windowHeight: '',// 屏幕高度
    ctrlVideo:{},    // 控制播放和暂停
    isPlay:true,     // 检测是否播放
    mniatouch:{}    //手指库实例对象
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    const id = options.id
    const that = this
    const resRelated = await getMvRelated(id)
    const furl = await getMvUrl(id)
    // 遍历请求 视频播放地址
    let relateurls = [{id:id,url:furl.data.data.url}]  // 将点击的mv作为第一个传入
    // resRelated.data.data.forEach 是异步进程 
    for (let i = 0; i < resRelated.data.data.length; i++) {
      const res = await getVideoUrl(resRelated.data.data[i].vid)
      // urls[0] 包含id 和 url
      relateurls.push(res.data.urls[0])
    }
    this.setData({'ctrlVideo':wx.createVideoContext('myVideo0', this)})
    this.data.ctrlVideo.play()  //默认播放第一个
    // 使用手指库
    this.setData({mniatouch:new MniaTouch(this,'touch1',{
      touchStart: function () {},
      touchMove: function () {},
      touchEnd: function () {},
      touchCancel: function () {},
      doubleTap: function () {
        if(that.data.isPlay){
          that.setData({isPlay:!that.data.isPlay})
          that.data.ctrlVideo.pause()
        }else{
          that.setData({isPlay:!that.data.isPlay})
          that.data.ctrlVideo.play()
        }
      }, //双击屏幕触发
    })})
    // 赋值：屏幕高度、
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight, urls: relateurls
    })
  },
  // 划动起始坐标方法
  touchStart(e) {
    // 开始坐标
    this.setData({
      pageY: e.touches[0].pageY,
    })
    
  },
  // 划动过程坐标方法
  touchMove(e) {
    let n = e.currentTarget.dataset.index;     // 触摸的第几个序号
    this.data.ctrlVideo.pause()
    let difference = e.touches[0].pageY - this.data.pageY; // 移动后和起始值的差值
    if (this.is_continue(n, difference)) {        // 判断是否到底
      return;
    }
    // 划动动画 -------------------------------------
    var animation = wx.createAnimation({       // 移动动效
      duration: 0,
    });
    animation.top(difference - (n * this.data.windowHeight)).step()
   
    this.setData({
      animation: animation.export(),          // 动画
      up_stroke: difference > 0 ? false : true, // 是否上划,
      difference: difference,                   // 拖动的距离
    })
  },

  // 划动结束坐标方法
  touchEnd(e) {
    let n = e.currentTarget.dataset.index;
    let difference = this.data.difference;  // 拖动的距离
    if (this.is_continue(n, difference)) {
      return;
    }
    const windowHeight = this.data.windowHeight;      // 屏幕高度
    let that = this;
    // 根据id获取点击元素距顶部高度
    var query = wx.createSelectorQuery();
    let id = '#' + e.currentTarget.id;
    query.select(id).boundingClientRect(function (rect) { // 获取高度
      if (Math.abs(difference) <= windowHeight / 7) {      // 小于1/7回原位置 ---------------------------
        that.data.ctrlVideo.play()
        var animation = wx.createAnimation({  // 移动动效
          duration: 100,
        });
        animation.top(-(n * windowHeight)).step()
        that.setData({
          animation: animation.export(),
          up_stroke: false,  // 重置划动状态
          difference: 0,     // 重置划动距离
        })
      } else {  // 大于1/4，移至拖动的下一个视频 --------------------------------
        var animation = wx.createAnimation({ // 移动动效
          duration: 200,
        });
        that.data.up_stroke ? n++ : n--;     // 上划：n+1  下划：n-1
        that.setData({'ctrlVideo':wx.createVideoContext('myVideo'+n, that)})
        that.data.ctrlVideo.play()
        animation.top(-(n * windowHeight)).step()
        that.setData({
          animation: animation.export(),
          up_stroke: false,  // 重置划动状态
          difference: 0,     // 重置划动距离
        })
      }
    }).exec();
  },

  // 判断是否到底
  is_continue(n, difference) {
    if (difference < 0) { // 上划
      if (n == this.data.urls.length - 1) { // 最后一个视频
        if (difference < -20) {
          wx.showToast({
            title: '已经到底了~~',
            icon: 'none',
            duration: 1000
          })
        }
        return true;
      }
    } else {
      if (n == 0) {
        if (difference > 20) {
          wx.showToast({
            title: '上面没有了~~',
            icon: 'none',
            duration: 1000
          })
        }
        return true;
      }
    }
  },

})
